<template>

  <div class="me">
    <div >
      <div  v-show="islogin" class="myself">
        <span>{{uname}}</span>
        <van-image
          round
          fit="cover"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <div v-show="!islogin"  class="myself">
        <router-link to="/login"><span>登录/注册</span></router-link>
        <van-image
          round
          fit="cover"
          src=""
        />
      </div>
      <div class="shoucang">
        <span>0</span><br />
        <span>收藏</span>
      </div>
      <div class="hr"></div>
      <div class="msg">
        <span>开通会员</span>
        <span>2021-08-06加入</span>
        <span>添加个人简介，让厨友更了解你</span>
      </div>
      <div class="hr"></div>
      <div class="cook">
        <span>厨房用具</span>
        <span>添加</span>
      </div>
      <div class="hr"></div>
      <div class="uses">
        <div>
          <div><van-icon name="clock-o" /></div>
          <span>浏览历史</span>

        </div>
        <div>
          <div><van-icon name="gem-o" /></div>
          <span>会员</span>
        </div>
        <div>
          <div><van-icon name="records" /></div>
          <span>课程</span>
        </div>
        <div @click="zhuxiao" v-show="uname != null">
          <div><van-icon name="close" /></div>
          <span>注销</span>
        </div>

      </div>
      <div class="hr"></div>
      <div class="nav">
        <van-tabs v-model="activeName">
          <van-tab title="菜谱" name="1">
              <!-- <van-card  desc="吃了就忘不了的梅干菜扣肉" thumb="/cook_img/001.jpg" v-for="(p,i) of 10" :key="i">
                <template #tags>
                    <div class="tags">
                        <van-image class="round" round src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                        <span>猫猫妈妈咪</span>
                    </div>
                </template>
              </van-card> -->
              <van-grid :border="false" :column-num="2" :gutter="1">
                <van-grid-item v-for="i in 10" :key="i">
                    <van-image class="collect" src="/cook_img/001.jpg" />
                    <div class="collect_card">
                        <span>鲜到爆的花甲粉丝煲</span>
                        <van-rate class="collect_grade" v-model="value" :size="10" color="#ffd21e" void-icon="star" void-color="#eee"/>
                        <span>219人做过</span>  
                    </div>
                </van-grid-item>
            </van-grid>
          </van-tab>
          <van-tab title="收藏" name="2">
              <van-card  desc="吃了就忘不了的梅干菜扣肉" thumb="/cook_img/001.jpg" v-for="(p,i) of 10" :key="i">
                <template #tags>
                    <div class="tags">
                        <van-image class="round" round src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                        <span>猫猫妈妈咪</span>
                    </div>
                </template>
              </van-card>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "1",
      value:5,
      islogin:false,
      uname:null
    };
  },
  mounted(){
      // console.log(sessionStorage.name);
      this.uname = sessionStorage.name;
      this.islogin = (sessionStorage.name != null)
      // if(sessionStorage.name==null){
      //      sessionStorage.clear();
      // }
      // console.log(1);
      // location.reload()
  },
  methods:{
    zhuxiao(){
        this.$dialog.confirm({
          message: '确定注销吗？',
        })
        .then((res) => {
          console.log(res);
          this.$store.state.name = null;
          sessionStorage.clear();
          // sessionStorage.setItem('active',0);
          this.$router.push('/cookHome');
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  
};
</script>
<style>
.me {
  padding: 15px;
}
.me .hr {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  border: 0.1px solid #f0f0f0;
}
.me .myself {
  padding: 5px;
  display: flex;
  justify-content: space-between;
}
.me .myself span {
  font-size: 24px;
  color: #232323;
  font-weight: bold;
  line-height: 90px;
}
.me .myself .van-image {
  width: 90px;
  height: 90px;
  vertical-align: middle;
}
.me .shoucang > span {
  padding: 5px;
  color: #656565;
  font-size: 12px;
}
.me .msg span {
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
}
.me .msg > span:first-child {
  display: block;
  width: 80px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #656565;
  background-color: #ffdc22;
  border-radius: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
}
.me .span {
  overflow: hidden;
}
.me .cook span {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: #232323;
}
.me .cook > :nth-child(2) {
  color: #ff3333;
  float: right;
}
.me .uses {
  text-align: center;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 13px;
}
.me .uses .van-icon {
  font-size: 16px;
  margin-bottom: 10px;
}
.me .nav {
  text-align: center;
}
.me .nav .round{
    vertical-align: middle;
    width: 20px;
    height: 20px;
}
.me .van-card{
    padding: 5px;
    margin-bottom: 10px;
}
.me .van-card__thumb{
    width: 120px;
    height: 120px;
}
.me .van-card__desc{
    margin-top: 25px;
    margin-bottom: 10px;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    color: #232323;
    height: 100px;
}
.me .van-ellipsis{
    text-align: left;
    overflow: visible;
    white-space: normal;
    word-wrap:break-word;
}
.me .van-card__content{
    margin-left: 10px;
}
.me .tags{
    position: absolute;
    bottom: 20px;
    left: 0;
}
.me .tags span{
    margin-left: 5px;
}

.me .collect img {
    border-radius: 8px;
}
.me .collect_card>span:nth-child(1) {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}
.me .collect_card>span:nth-child(3) {
    font-size: 8px;
    font-weight: 500;
    margin-bottom: 5px;
    text-align: center;
}
.me .collect_card {
    margin: 5px 0;
}
.me .collect_grade {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.me .van-grid-item__content {
    padding: 5px;
}

</style>